import React, { Component } from 'react'
import PropTypes from 'prop-types'
import style from '../ResourceSystem/style.less'
import Layout from '../Wrap'
import {connect} from 'react-redux'
import {Link} from 'react-router-dom'
import ContentWrap from '../Content'
import { Table, Select, Button, Icon, message, Input, Tabs } from 'antd'
import F from '../../helper/tool'
import {
  getMyClueList,
} from '../../actions/myClue'
// const ButtonGroup = Button.Group
const Option = Select.Option
const TabPane = Tabs.TabPane

const {Wrap} = Layout

@connect((state) => {
  return {
    myClue: state.myClue,
  }
})
class Logs extends Component {
  state = {
    selectedRowKeys: [], // Check here to configure the default column
    loading: false,
  };
  static propTypes = {
    dispatch: PropTypes.func,
    myClue: PropTypes.object,
  }
  columns = [{
    title: '客户编号',
    dataIndex: 'number',
  }, {
    title: '客户姓名',
    dataIndex: 'name',
    render: (text, record) => <a onClick={() => { this.userDetail(text, record) }}>{text}</a>,
  }, {
    title: '客户类型',
    dataIndex: 'cType',
  }, {
    title: '审核状态',
    dataIndex: 'sta',
  }, {
    title: '提交时间',
    dataIndex: 'createTime',
  }, {
    title: '修改时间',
    dataIndex: 'modifyTime',
  }, {
    title: '操作',
    dataIndex: 'action',
    render: (text, record) => {
      if (record.status === 1) {
        return <a href="#." onClick={() => { this.userAudit(record) }}>查看反馈</a>
      } else {
        return <span>已审核</span>
      }
    },
  }]
  start = () => {
    this.setState({ loading: true })
    // ajax request after empty completing
    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
        loading: false,
      })
    }, 1000)
  }
  onSelectChange = (selectedRowKeys) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys)
    this.setState({ selectedRowKeys })
  }

  handleMenuClick = (e) => {
    message.info('Click on departMenu item.')
    console.log('click', e.item.props.children)
  }

  handleChange = (value) => {
    console.log(`selected ${value}`)
  }

  onChange = (pageNumber) => {
    console.log('pageNumber', pageNumber)
  }

  handleQueryBest = (value) => { // 初级查询
    const { page } = this.props.myClue
    const ss = F.filterUndefind(value)
    this.isBest = true
    this.queryCondition = ss
    this.props.dispatch(getMyClueList({
      listType: 2,
      pageNum: page.pageNum,
      pageSize: page.pageSize,
      ...ss,
    }))
  }

  onShowSizeChange = (pageNum, pageSize) => { // 点击每页显示个数
    // console.log(pageNum, pageSize)
    this.props.dispatch(getMyClueList({
      listType: 2,
      pageNum: pageNum,
      pageSize: pageSize,
      ...this.queryCondition,
    }))
  }

  pageChange = (pageNum, pageSize) => { // 点击页数
    // console.log(pageNum, pageSize)
    this.props.dispatch(getMyClueList({
      listType: 2,
      pageNum: pageNum,
      pageSize: pageSize,
      ...this.queryCondition,
    }))
  }

  componentDidMount() {
    const { page } = this.props.myClue
    this.props.dispatch(getMyClueList({ // 初始化list
      listType: 2,
      pageNum: page.pageNum,
      pageSize: page.pageSize,
    }))
  }

  render() {
    // const { selectedRowKeys, size, total } = this.state
    const { page, list, loading } = this.props.myClue

    if (!page) {
      return null
    }
    // const rowSelection = {
    //   selectedRowKeys,
    //   onChange: this.onSelectChange,
    // }
    // const hasSelected = selectedRowKeys.length > 0
    const rowSelection = {
      // selectedRowKeys,
      onChange: this.onSelectChange,
    }
    let pagination = {
      onChange: this.pageChange,
      onShowSizeChange: this.onShowSizeChange,
      total: page.total,
      defaultCurrent: page.pageNum,
      pageSize: page.pageSize,
      showSizeChanger: true,
      showQuickJumper: true,
    }

    // console.log(this.props)
    return (
      <Layout className={style.LogsWrap}>
        <Wrap>
          <ContentWrap style={{ borderTop: 'none' }}>
            <div className={style.listTitle}>
              <div>
                <Icon type="search" className={style.search} />
                &ensp;筛选查询
              </div>
              <div>
                <Button onClick={this.handleQuery}>查询结果</Button>
              </div>
            </div>
            <div>
              <div className={style.listTop}>
                <div className={style.formGroup}>
                  <label htmlFor="">输入搜索：</label>
                  <div>
                    <Input placeholder="请输入搜索条件" />
                  </div>
                </div>
                <div className={style.formGroup}>
                  <label htmlFor="">客户类型：</label>
                  <div>
                    <Select defaultValue="请选择客户类型" style={{ width: 120 }} onChange={this.handleChange}>
                      <Option value="财务部">财务部</Option>
                      <Option value="人事部">人事部</Option>
                      <Option value="产品部">产品部</Option>
                    </Select>
                  </div>
                </div>
                <div className={style.formGroup}>
                  <label htmlFor="">分配方式：</label>
                  <div>
                    <Select defaultValue="请选择分配方式" style={{ width: 120 }} onChange={this.handleChange}>
                      <Option value="Lucy">Lucy</Option>
                      <Option value="Miracle">Miracle</Option>
                      <Option value="Marry">Marry</Option>
                    </Select>
                  </div>
                </div>
              </div>
            </div>
            <div className={style.listTitle}>
              <div>
                <Icon type="bars" className={style.bars} />
                &ensp;数据列表
              </div>
              <div>
                <Button onClick={this.handleQuery}>联系人维护</Button>&emsp;
                <Button onClick={this.handleQuery}>分配客户</Button>&emsp;
                <Button onClick={this.handleQuery}>申请延期</Button>&emsp;
                <Button onClick={this.handleQuery}>礼品</Button>&emsp;
                <Link to="/clueAdd"><Button onClick={this.handleQuery}>新增联系人</Button>&emsp;</Link>
                <Button onClick={this.handleQuery}>新增商机</Button>
              </div>
            </div>
            <Table
              loading={loading}
              title={this.renderHeaser}
              className={style.table}
              rowSelection={rowSelection}
              columns={this.columns}
              dataSource={list}
              pagination={pagination}
            />
          </ContentWrap>
        </Wrap>
      </Layout>
    )
  }
}

export default Logs
